<template>
<uni-shadow-root class="partials-tab-index"><block v-if="receiveData.androidTemplate == ''">
    
    <view class="tab_page_wrap">
        <scroll-view scroll-x :class="firstDistance&&(firstDistance<=scroll-4)?'tab_page_list fixed':'tab_page_list'" id="tab-h" scroll-with-animation="true" :style="'background:'+(receiveData.jsonData.bgColor||'#fff')">
             <view v-for="(type,index) in (receiveData.jsonData.tabs)" :key="type.index" :data-index="index" :data-url="type.linkUrl" @click="swichNav" :id="'tab_'+type.id" class="tab_page_item" :style="'font-size:'+(currentTab==index?'32rpx':'28rpx')+';color:'+(currentTab==index?receiveData.jsonData.fontHoverColor:receiveData.jsonData.fontColor)+';border-bottom:'+(currentTab==index?'4rpx solid '+receiveData.jsonData.fontHoverColor:receiveData.jsonData.fontColor)+';'">{{type.title}}</view>
        </scroll-view>
    </view>
</block>
<block v-if="receiveData.androidTemplate == 'love_tab_page'">
    
    <view class="tab_page_wrap">
        <scroll-view scroll-x :class="firstDistance&&(firstDistance<=scroll-4)?'tab_page_list fixed':'tab_page_list'" id="tab-h" scroll-with-animation="true">
            <view v-for="(type,index) in (receiveData.jsonData.tabs)" :key="type.index" :data-index="index" :data-url="type.linkUrl" @click="swichNav" :id="'tab_'+type.id" class="tab_page_item" :style="'font-size:'+(currentTab==index?'32rpx':'28rpx')+';color:'+(receiveData.jsonData.fontColor)">
             <text class="tab_page_item_text">{{type.title}}</text>
             <view class="active_bar" :style="'background:linear-gradient(90deg,'+(receiveData.jsonData.bgColor||'#fff')+' 0%,'+(receiveData.jsonData.fontHoverColor||'#fff')+' 100%);'" v-if="currentTab==index"></view>
            </view>
        </scroll-view>
    </view>
</block>
<component-tag-custom-page class="custom_page"></component-tag-custom-page></uni-shadow-root>
</template>

<script>
import ComponentTagCustomPage from '../tab_custom_page/index.vue'
global['__wxVueOptions'] = {components:{'component-tag-custom-page': ComponentTagCustomPage}}

global['__wxRoute'] = 'partials/tab/index'
const app = getApp();
Component({
  properties: {
    receiveData: {
      type: JSON,
      value: '',
    }
  },
  data: {
    someData: {},
    sysWidth: "",
    arr: [],
    currentTab: 0,
    currentPageName: "",
    show: true,
    scroll:0,
    firstDistance:'',
    sendData:'',
  },
  ready: function () {
    let that = this;
    console.log("====tab====", that.data.receiveData)
    that.setData({
      sysWidth: app.globalData.sysWidth,
      arr: that.data.receiveData.jsonData.tabs
    });
    console.log("===arr===",that.data.arr)
    let firstTabData = that.data.receiveData.jsonData.tabs[0];
    let linkUrl = firstTabData.linkUrl;
    let pageName = linkUrl.replace("custom_page_", "").replace(".html", "")
    let sendData = JSON.stringify({ title: 'noTitle', url: pageName ,params: {
        pageObjectId: that.data.receiveData.pageObjectId||0,
        pageObjectType: that.data.receiveData.pageObjectType||0
      }})
      console.log("==that.selectComponent('.custom_page')===",that.selectComponent('.custom_page'))
    that.selectComponent('.custom_page').initFun(sendData);
    if (pageName!='index'){
      that.setData({
        currentTab: 0,
        sendData: sendData
      })
    }
    that._observer = wx.createIntersectionObserver(that);
    console.log("===observer===",that.observer)
    that._observer.relativeTo('.tab_page_list').observe('.tab_page_item', (res) => {
        console.log("===res===",res)
        if (!that.data.firstDistance) {
          that.setData({
            firstDistance: res.boundingClientRect.top,
          })
        }
    })
  },
  methods: {
    // 点击标题切换当前页时改变样式
    renderPage: function (linkUrl, index){
      let that = this;
      // that.setData({ show: false })
      console.log("==that.selectComponent('.custom_page')===",that.selectComponent('.custom_page'))
      app.globalData.showToastLoading('loading', true)
      let pageName = linkUrl.replace("custom_page_", "").replace(".html", "")
      let sendData = JSON.stringify({ title: 'noTitle', url: pageName ,params: {
        pageObjectId: that.data.receiveData.pageObjectId||0,
        pageObjectType: that.data.receiveData.pageObjectType||0
      }})
      if (that.data.currentTab == index) {
        console.log("当前")
        // setTimeout(function(){
        //     that.setData({ show: true })
        // },100)
        that.selectComponent('.custom_page').initFun(sendData);
        wx.hideLoading();
        return false;
      } else {
        console.log("其他")
        that.setData({
          currentTab: index,
          sendData: sendData
        })
        that.selectComponent('.custom_page').initFun(sendData);
        // setTimeout(function(){
        //     that.setData({ show: true })
        // },100)
      }
      if (that.data.show) {
        wx.hideLoading();
      }
      console.log("======currentPageName=====", that.data.currentPageName)
    },
    swichNav: function (e) {
      let that = this;
      console.log("===e====", e)
      let index = e.currentTarget.dataset.index;
      // let currentItem = e.currentTarget.dataset.item;
      // let linkUrl = currentItem?currentItem.linkUrl:'';
      let linkUrl = e.currentTarget.dataset.url||'';
      that.renderPage(linkUrl, index)
    },
    scrollTo:function(object){
      let that=this;
      that.setData({
        scroll: object.scrollTop
      })
    },
    //判断当前滚动超过一屏时，设置tab标题滚动条。
    checkCor: function () {
      if (this.data.currentTab > 4) {
        this.setData({
          scrollLeft: 300
        })
      } else {
        this.setData({
          scrollLeft: 0
        })
      }
    },
  },
})
export default global['__wxComponents']['partials/tab/index']
</script>
<style platform="mp-weixin">
@import 'lovePage/index.css';
.tab_page_wrap{
}
.fixed{
  position: fixed;
  top: 0;
  z-index:100;
}
.tab_page_list{
    height: 76rpx;
    width: 100%; 
    box-sizing: border-box;
    overflow: hidden;
    line-height: 68rpx;
    font-size: 28rpx; 
    white-space: nowrap;
    background: #fff;
}
.tab_page_item{
    margin:0 24rpx;
    height: 60rpx;
    display: inline-block;
    font-weight: bolder;
    position: relative;
}
.tab_page_item:first-child{
    margin-left: 20rpx;
    height: 60rpx;
    display: inline-block;
}
.tab_page_item.active{
   color: #4675F9;
   position: relative;
}
.tab_page_item.active:after{
    content: "";
    display: block;
    height: 8rpx;
    width: 100%;
    background: #4675F9;
    position: absolute; bottom: 0;
    left: 0;
    border-radius: 16rpx;
}
.item-ans{
    width: 100%;
    display: flex;
    flex-grow: row no-wrap;
    justify-content: space-between; 
    padding: 30rpx;
    box-sizing: border-box;
    height: 180rpx;
    align-items: center;
    border-bottom: 1px solid #F2F2F2;
 }
.avatar{
    width: 100rpx;
    height: 100rpx;
    position: relative;
    padding-right: 30rpx;
}
.avatar .img{
    width: 100%;
    height: 100%;
}
.avatar .doyen{
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    bottom: -2px;
    right: 20rpx;
}
.expertInfo{
    font-size: 12px;
    flex-grow: 2;
    color: #B0B0B0;
    line-height: 1.5em;
}
.expertInfo .name{
    font-size: 16px;
    color:#000;
    margin-bottom: 6px;
}
.askBtn{ 
    width: 120rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    font-size: 14px;
    border-radius: 60rpx;
    border: 1px solid #4675F9; 
    color:#4675F9;
}
.tab-content{
   margin-top: 80rpx;
}
.scoll-h{height: 100%;}
.hhh{
  width: 750rpx;
  height: 80rpx;
}
</style>